<template>
  <div>
    <van-cell>
      <div class="goods">
        <div class="goods-right">
          <h3>{{ goodlist.shop_name }}</h3>
        </div>
        <template>
          <div class="goods-left">
            <div ref="GoodsStatusRef">
              {{ this.goodsStatus }}
            </div>
            <div class="price_box">
              ¥ <span class="good_price">{{ goodlist.price }}</span>
            </div>
            <van-button round size="small" class="clickLook" @click="GoodsDetailsPopup = true">{{ this.goodlist.status === 0 ? '去付款' : '查看订单' }}</van-button>
            <van-popup position="bottom" :style="{ width: '100%', height: '100%' }" v-model="GoodsDetailsPopup">
              <goods-details
                v-if="GoodsDetailsPopup"
                :DetailsItem="goodlist"
                @close="GoodsDetailsPopup = false"
                @to_refund="refund($event)"
                @confirm_order="$emit('confirmorder')"
                @to_confirm_refund="confirmRefund($event)"
                @to_confirm_delivery="confirmDelivery($event)"
            /></van-popup>
          </div>
        </template>
      </div>
    </van-cell>
  </div>
</template>

<script>
import goodsDetails from '../../particulars/index'
export default {
  /*   provide: function () {
      return {
        goodslist: this.goodlist
      }
    }, */
  props: {
    goodlist: {
      type: Object,
      required: true
    }
  },
  components: {
    goodsDetails
  },
  data () {
    return {
      goodsStatus: '', // 状态的文本
      GoodsDetailsPopup: false
    }
  },
  created () {
  },
  updated () {
    this.getStatusText()
  },
  mounted () {
    this.getStatusText()
  },
  methods: {
    getStatusText () {
      switch (this.goodlist.status) {
        case 1:
          this.goodsStatus = '待派送'
          this.$refs.GoodsStatusRef.className = 'bule'
          break
        case 2:
          this.goodsStatus = '待自提'
          this.$refs.GoodsStatusRef.className = 'bule'
          break
        case 3:
          this.goodsStatus = '已收货'
          this.$refs.GoodsStatusRef.className = 'yellowgreen'
          break
        case 4:
          this.goodsStatus = '售后退款'
          this.$refs.GoodsStatusRef.className = 'red'
          break
        case 5:
          this.goodsStatus = '已退款'
          this.$refs.GoodsStatusRef.className = 'yellowgreen'
          break
        default:
          this.goodsStatus = '待支付'
      }
    },
    getgoodlist () {
      return this.goodlist
    },
    refund (val) {
      this.$emit('to_refund', val)
    },
    confirmRefund (val) {
      this.$emit('to_confirmrefund', val)
    },
    confirmDelivery (val) {
      this.$emit('to_confirmdelivery', val)
    }
    /*  onGoodBtn (id, val) {
       switch (val) {
         case 1: // 待配送
           this.$router.push('/order/distribution/' + id)
           break
         case 2: // 待自提
           this.$router.push('/order/extract/' + id)
           break
         case 3: // 已收货
           this.$router.push('/order/receiving/' + id)
           break
         case 4: // 售后退款
           this.$router.push('/order/refund/' + id)
           break
         default: // 待支付
           this.$router.push('/order/nopay/' + id)
       }
     } */
  }
}
</script>

<style scoped lang="less">
.van-cell {
  padding: 0;
  .clickLook {
    color: #fff;
    background-color: orangered;
  }
  .goods {
    font-size: 28px;
    display: flex;
    padding: 15px;
    width: 100%;
    height: 230px;
    background-color: #fff;
    box-sizing: border-box;
    border-top: rgb(253, 105, 6) 10px solid;
    .goods-right {
      width: 80%;
      height: 100%;
      .good_photo {
        width: 200px;
        height: 200px;
      }
    }
    .goods-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 20%;
      height: 100%;
      .price_box {
        margin: 5px 0;
        .good_price {
          font-size: 50px;
        }
      }
      .van-button {
        font-size: 25px;
      }
      .red {
        color: red;
      }
      .bule {
        color: blue;
      }
      .yellowgreen {
        color: yellowgreen;
      }
      .cyan {
        color: cyan;
      }
    }
  }
}
</style>
